<template>
  <div class="importTbale">
    <el-button icon="el-icon-upload2" type="success" plain @click="importDialog=true" size="mini">{{nbImportTitle?'批量换表':'导入Excel模板'}}</el-button>
    <!-- 弹窗 -->
    <el-dialog title="导入" :visible.sync="importDialog" width="780px" :before-close="handleClose">
      <el-upload class="upload-demo" ref="upload" :headers='{Authorization:$store.state.user.token}' :action='importUrl' :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :on-success="handleSuccess" :on-error="handleError" :auto-upload="false">
        <!-- :on-error='onError' -->
        <!-- :on-change="handleChange" -->
        <!-- <el-dropdown-menu></el-dropdown-menu> -->
        <el-button slot="trigger" size="small" type="primary">选择要导入的文件</el-button>
        <!-- <el-button slot="trigger" size="small" type="primary">{{importUrl}}选择要导入的文件</el-button> -->
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确认上传</el-button>
        <!-- <div slot="tip" class="el-upload__tip"></div> -->
      </el-upload>
      <!-- <el-progress :percentage="50"></el-progress> -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'importTbale',

  props: [
    'nbImportTitle',
    'suoS',
    'multipleSelection',
    'importUrl',
    'disabledImport',
    'disabled',
  ],
  data() {
    return {
      // 上传路径
      // importUrl: `/api/cb/flFactory/importXls`,
      // importUrl: `/api/cb/flFactory/importXls`,
      // 导入窗口开关
      importDialog: false,
      // importData: {
      //   // 上传数据
      fileList: [],
      disableExportData: false,
      // 下载模板的数据
      // downloadData:null
      // }
    }
  },
  methods: {
    // disabledExport(){
    //   if (this.dataAttribute) {
    //     if (this.dataAttribute.length == 0) {
    //       this.disableExportData = true
    //     }else{
    //       this.disableExportData = false
    //     }
    //   }else{
    //       this.disableExportData = true
    //   }
    // },
    // onError(err,file,fileList){
    //   console.log(err,file,fileList,888);

    // },
    // 弹窗关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch((_) => {})
    },
    // 上传的方法
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    // handleChange(file, fileList){
    //   console.log(file, fileList);
    //   // if (file.raw) {
    //   //   this.$message({
    //   //     message
    //   //   })
    //   // }
    // },
    handleSuccess(res, file, fileList) {
      // console.log(res,file,fileList,888);
      if (res.flag) {
        // 提醒
        this.$message({
          message: res.message,
          type: 'success',
        })
        this.$emit('handleSuccessImport', '导入成功')
      } else {
        this.$alert(res.message, '导入失败：', {
          confirmButtonText: '确定',
          callback: (action) => {
            // this.$message({
            //   type: "warning",
            //   message: res.message
            // });
          },
        })
        // 提醒
        // this.$message({
        //   message:res.message,
        //   type:'warning'
        // })
      }
      // 清空数组
      this.fileList = []
      // 关闭窗口
      this.importDialog = false
    },
    handleError(res, file, fileList) {
      console.log(res, file, fileList, '失败')

      // 清空数组
      // this.fileList = []
      // 关闭窗口
      // this.importDialog = false
    },
    // handleChange(file, fileList) {
    //   this.fileList = fileList.slice(-3);
    // },
    // // 进度条方法
    // format(percentage) {
    //   return percentage === 100 ? '满' : `${percentage}%`;
    // },
  },
  created() {
    // this.disabledExport()
  },
  wacth: {
    disabledImport(newValue) {
      this.disabledImport = newValue
    },
  },
  // watch:{
  //   disabledExport(newValue){
  //     this.disabledExport = newValue
  //     this.disabledExport()
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.importTbale {
  display: inline-block;
}
</style>
